<template>
  <view class="product-item" @click.stop="itemClick">
    <view class="product-img relative">
      <view
        v-if="item?.status === ProductStatusEnum.INVALID"
        class="absolute left-0 top-0 w-full h-full br-4 disFlxCC fz-12"
        style="background-color: rgba(0, 0, 0, 0.6); z-index: 1;color: white;"
      >
        <text>已失效</text>
      </view>
      <TImage :src="item?.imageUrl" width="100%" height="100%" border-radius="8rpx" />
    </view>
    <view class="right">
      <view class="product-name text-overflow-1">
        <text>{{ item?.productName }}</text>
      </view>
      <view v-if="type !== 'buy' && item?.productType" class="product-type">
        <text>{{ getProductTypeText(item.productType) }}</text>
      </view>
      <view class="handle-view">
        <!-- <view class="product-price">
          <text>{{ formatMoney({ money: item?.minPrice || 0, showFreeText: true }) }}</text>
        </view> -->
        <Price
          _Style="font-weight: bolder;"
          :min-price="item?.minPrice"
          :max-price="item?.minPrice"
          :price-show-type="item?.priceShowType"
        />
        <view v-if="type" @click.stop="handleClick">
          <text v-if="type === 'selected'">移除产品</text>
          <view class="buy-btn" v-else-if="type === 'buy'">
            <text>领取</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { ProductListResult } from '@/api/card/types';
  import TImage from '@/components/TImage/index.vue';
  import { ProductStatusEnum, getProductTypeText } from '@/enums/productEnum';
  import type { PropType } from 'vue';
  import Price from '@/components/Price/index.vue';

  const props = defineProps({
    item: Object as PropType<ProductListResult>,
    type: {
      type: String as PropType<'buy' | 'selected'>,
    },
  });

  const emit = defineEmits(['handleClick', 'click']);

  function handleClick() {
    emit('handleClick', props.item);
  }

  function itemClick() {
    emit('click', props.item);
  }
</script>
<style lang="scss" scoped>
  .product-item {
    flex: 1;
    padding: 24rpx;
    display: flex;
    align-items: center;
    .product-img {
      width: 160rpx;
      height: 160rpx;
      flex-shrink: 0;
      margin-right: 24rpx;
    }
    .product-name {
      font-size: 28rpx;
      color: #333;
    }
    .right {
      flex: 1;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 28rpx;
      .product-type {
        width: fit-content;
        padding: 0 16rpx;
        font-size: 24rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background-color: #d0f7ff;
        color: #2878ff;
      }
      .handle-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ea5e0e;
        .product-price {
          font-weight: bolder;
        }
        .buy-btn {
          color: #ea5e0e;
          font-size: 24rpx;
          font-weight: bolder;
          background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
          padding: 8rpx 16rpx;
          border-radius: 24rpx;
        }
      }
    }
  }
</style>
